<!--
 * @Author: Ethan Teng
 * @Date: 2022-08-10 18:32:06
 * @LastEditTime: 2022-08-10 20:29:17
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="start()">start</button>
    <div id="msg"></div>

    <script>
      const source = new EventSource('http://localhost:3001/test-sse/sse');

      const start = () => {
        source.addEventListener(
          'open',
          () => {
            console.log('SSE connection established');
          },
          false
        );

        source.addEventListener(
          'message',
          e => {
            showMessage(`message: ${e.data}`);
            source.close();
          },
          false
        );

        source.addEventListener(
          'custom-event',
          e => {
            showMessage(`custom-event: ${e.data}`);
            source.close();
          },
          false
        );

        source.addEventListener(
          'custom-event-1',
          e => {
            showMessage(`custom-event-1: ${e.data}`);
            source.close();
          },
          true
        );
      };

      const showMessage = text => {
        document.querySelector('#msg').innerHTML = text;
      };
    </script>
  </body>
</html>
